
<template>
  <div>
    <el-form :inline="true" :label-position="'right'"  class="demo-form-inline">

      <el-form-item label="附件类型">
        <el-select v-model="selected"  >
          <el-option
              v-for="item in baseOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
        </el-select>
      </el-form-item>
      <br/>
      <el-form-item label="选择附件">
        <el-upload
            class="upload-demo"
            ref="upload"
            :http-request="uploadSectionFile"
            :on-remove="handleRemove"
            :before-upload="custListfileBeforeAvatarUpload"
            :file-list="fileList"
            action="#"
            :auto-upload="false">
            <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
            <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
        </el-upload>
      </el-form-item>

    </el-form>

    <el-table    :data="tableData"       border    style="width: 100%" :cell-style="{'text-align':'center'}">
      <el-table-column    align="center"   type="index"  label="序号"      width="50">          </el-table-column>
      <el-table-column    align="center"  prop="fileName"      label="附件名称"      width="180">
        <template slot-scope="scope">{{ scope.row.fileName }}</template>
      </el-table-column>
      <el-table-column    align="center"  prop="fileTypeCdName"      label="附件类型" width="150">    </el-table-column>
      <el-table-column    align="center"  prop="createUserName"      label="上传人" width="100">    </el-table-column>
      <el-table-column    align="center" prop="orgName"    label="上传人单位" width="120">   </el-table-column>
      <el-table-column    align="center"  prop="createDate"      label="上传时间" width="">
         <template slot-scope="scope">{{scope.row.createDate.slice(0, 4) + "-" + scope.row.createDate.slice(4, 6)+ "-" + scope.row.createDate.slice(6, 8)  }}</template>
      </el-table-column>
      <el-table-column    align="center"   prop="custOrderFileId"   label="操作"  width="150">
        <template slot-scope="scope" >
          <el-row>
            <el-button type="success" @click="downFiles(scope.row )">下载</el-button>
            <el-button type="danger" @click="deleteFiles(scope.row )">删除</el-button>
          </el-row>
        </template>
       </el-table-column>
    </el-table>
  </div>
</template>

<script>
import requestUtil from '@/utils/requestEnc';
import CustOrderService from "@/api/order/CustOrderService";
import OrderService from "@/api/order/OrderService";
import { mapState } from "vuex";
 

export default {
  components: {
		requestUtil,
		CustOrderService,
    OrderService
  },
  computed: {
		...mapState("user", ["user"]),
	},
  async mounted(){
    console.log(this.ODKInfo.sysource);
    
    var custOrderId = this.CTOInfo[0].custOrderId;//this.CTOInfo[0].custOrderId;
    if(this.ODKInfo.sysource == 1){
      let params = {
				interFaceType: "ORDER",
				sqlId: 2021060501,
				paramStr: "custOrderId:"+custOrderId,
			};
      const resultItem =await OrderService.getCustNum(params);
      
      this.orderItemId=resultItem.meta.resList.executeSqlResps[0].parOrderItemId;
      

    }else{
      this.orderItemId = this.CTOInfo[0].orderItemId;// this.CTOInfo[0].orderItemId;
    }

    var custId = this.CTOInfo[0].custId;
    var custItemFileFlag = this.ODKInfo.sysource;
    var orderItemId= this.orderItemId;
    if(custItemFileFlag !='2'){
      const result =await OrderService.qryFilesItem({custOrderId,orderItemId,custId,custItemFileFlag});
      this.tableData=result.meta.orderItemFiles;
    }else{
      const result =await OrderService.qryFilesItem({custOrderId,orderItemId,custId});
      this.tableData=result.meta.orderItemFiles;
    }


    let params = {
				interFaceType: "ORDER",
				sqlId: 2021052112,
				paramStr: "attrId:9841",
			};
    const resultSel =await OrderService.getCustNum(params);

    
    if(resultSel.code == 200 && resultSel.meta.resCode==0){
      this.baseOptions=resultSel.meta.resList.executeSqlResps;
      this.selected=this.baseOptions[0].value;

    }

  },

  props:{
	  	ODKInfo: {
			type: Object,
			default: () => {
				return {};
			},
		},
		CTOInfo: {
			type: Array,
			default: () => {
				return [];
			},
		},

  },
  data() {
    return {
    fileList:[],
    selected:[],
    baseOptions: [
      {
        value:'98410001',
        label:'普通附件'
      }
    ],
    tableData: [],
    orderItemId:'',
    progressFlag: false,  
	  }
  },
  methods: {
    // 上传
    async uploadSectionFile(param){
      this.progressFlag=true;
      var files=param.file;
      let paramFormData = new FormData();
      //遍历 fileList

      
      paramFormData.append("file", files);
      paramFormData.append("custOrderId", this.CTOInfo[0].custOrderId);
      paramFormData.append("custId", this.CTOInfo[0].custId);
      paramFormData.append("orderItemId", this.orderItemId);
      paramFormData.append("actType", "ADD");
      paramFormData.append("createUser", this.user.staffId);
      paramFormData.append("fileTypeCd", this.selected);
      paramFormData.append("custItemFileFlag", this.ODKInfo.sysource);

      //const uploadPayload = this.uploadPayload;
      const uploadResult =await OrderService.handelUploadFile( paramFormData );
      
      if (uploadResult.code == 1) {
          this.$confirm(uploadResult.meta, "提示", {
            confirmButtonText: "确定",
            showCancelButton: false,
            type: "warn",
            center: true
          });
          this.progressFlag=false;
      }else if(uploadResult.code == 0){
        this.$confirm("附件:"+files.name+"上传成功", "提示", {
            confirmButtonText: "确定",
            showCancelButton: false,
            type: "warn",
            center: true
          });
        var custOrderId = this.CTOInfo[0].custOrderId;//this.CTOInfo[0].custOrderId;
        var orderItemId = this.orderItemId;// this.CTOInfo[0].orderItemId;
        var custId = this.CTOInfo[0].custId;//this.CTOInfo[0].custId;
        var custItemFileFlag = this.ODKInfo.sysource;

        if(custItemFileFlag !='2'){
          const result =await OrderService.qryFilesItem({custOrderId,orderItemId,custId,custItemFileFlag});
          this.tableData=result.meta.orderItemFiles;
        }else{
          const result =await OrderService.qryFilesItem({custOrderId,orderItemId,custId});
          this.tableData=result.meta.orderItemFiles;
        }

        this.progressFlag=false;
      }

      this.$refs.upload.clearFiles();

    },
    //上传前校验
    custListfileBeforeAvatarUpload(file) {

      const isLt10M = file.size / 1024 / 1024 < 10;
       
      if (!isLt10M) {
        this.$alert("上传文件大小不能超过 10MB!", "警告", {
          type: "warning",
          confirmButtonText: "关闭",
        });
        return false;
      }
    },
    //下载附件
    async downFiles(filesData) {

      var custOrderFileId= filesData.custOrderFileId;
      var custOrderId= filesData.custOrderId;
      var fileName= filesData.fileName;
      var filePath= filesData.filePath;

      const res =await OrderService.handelDownFile({fileName,filePath});
      

      if(res.size>0){
        let url = window.URL.createObjectURL(new Blob([res])) ;//创建下载链接
        let link = document.createElement('a') ;//创建a标签
        link.style.display = 'none'  ;//将a标签隐藏
        link.href = url ; //给a标签添加下载链接
        link.setAttribute('download', fileName); // 此处注意，要给a标签添加一个download属性，属性值就是文件名称 否则下载出来的文件是没有属性的，空白白
        document.body.appendChild(link)  ;
        link.click() ; //执行a标签
      }else{
        this.$confirm(fileName+"下载失败!", "提示", {
          confirmButtonText: "确定",
          showCancelButton: false,
          type: "warn",
          center: true
        });
      }

    },
    //删除附件
    async deleteFiles(filesData) {
       
      this.$confirm("确认删除该附件吗？", "提示", {
        confirmButtonText: "确定",
        type: "warning",
        cancelButtonText: "取消",
      }).then(async () => {
          var custOrderFileId= filesData.custOrderFileId;
          var custOrderId= filesData.custOrderId;
          var orderItemId= this.orderItemId;
          var fileName= filesData.fileName;
          var filePath= filesData.filePath;
          var custId= this.CTOInfo[0].custId;// filesData.custId
          var createUser= filesData.createUser;
          var actType= 'DEL' ;
          const delResult =await OrderService.delFile({fileName,filePath,custOrderFileId,custOrderId,orderItemId,createUser,actType,custId});
          

          this.$confirm(delResult.meta, "提示", {
            confirmButtonText: "确定",
            showCancelButton: false,
            type: "warn",
            center: true
          });

          var custOrderId = this.CTOInfo[0].custOrderId;//this.CTOInfo[0].custOrderId;
          var orderItemId = this.orderItemId;// this.CTOInfo[0].orderItemId;
          var custId = this.CTOInfo[0].custId;//this.CTOInfo[0].custId;
          var custItemFileFlag = this.ODKInfo.sysource;

          if(custItemFileFlag !='2'){
            const result =await OrderService.qryFilesItem({custOrderId,orderItemId,custId,custItemFileFlag});
            this.tableData=result.meta.orderItemFiles;

          }else{
            const result =await OrderService.qryFilesItem({custOrderId,orderItemId,custId});
            this.tableData=result.meta.orderItemFiles;

          }

          
        }).catch(() => {});


    } ,
    //上传附件
    submitUpload() {
      if(this.progressFlag){
        this.$alert("文件正在上传中,请稍等!", "警告", {
          type: "warning",
          confirmButtonText: "关闭",
        });
        return false; 
      }
      this.$refs.upload.submit();

    },
    //文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用
    onChange(file, fileList) {
      this.fileList = fileList;
    },
    handleRemove(file, fileList) {
      this.fileList = fileList;
    },
  

  }
}
</script>
<style>
.el-form--inline .el-form-item {
  display: inline-flex;
  margin-right: 0.1rem;
  vertical-align: top;
}

.el-form-item__label {
  width: 94px;
}
.btnDir {
  margin-left: 36%;
  margin-top: 19px;
}
.el-table--enable-row-transition{
  margin-bottom: 20px;
}
</style>

